<template>
  <div id="across">
    <div class="container">
      <el-amap
        class="amap-box"
        :amap-manager="amapManager"
        :vid="'amap-vue'"
        :zoom="zoom"
        :plugin="plugin"
        :center="center"
        :events="events"
      >
      </el-amap>
    </div>
  </div>
</template> 
<script>
import { AMapManager, } from "vue-amap";
let amapManager = new AMapManager();
export default {
  data() {
    let self = this;
    return {
      address: null,
      addressa:'',
      searchKey: "西安", //所有的地址
      amapManager,
      markers: [],
      searchOption: { city: "全国", citylimit: true },
      center: [121.329402, 31.228667],
      zoom: 17,
      lng: 0,
      lat: 0,
      loaded: true,
      events: {
        
      }, // 一些工具插件
      plugin: [
        {
          pName: "Geocoder", //
          events: {
            init(o) {
            //   console.log("---------", o);
            },
          },
        },
        {
          // 定位
          pName: "Geolocation",
          events: {
            init(o) {
              // o是高德地图定位插件实例
              o.getCurrentPosition((status, result) => {
                if (result && result.position) {
                    // console.log(result.addressComponent.city);
                    self.addressa = result.addressComponent.city
                    self.$store.commit('Amap',result.addressComponent.city)
                  // 设置经度
                  self.lng = result.position.lng; // 设置维度
                  self.lat = result.position.lat; // 设置坐标
                  self.center = [self.lng, self.lat];
                  self.markers.push([self.lng, self.lat]); // load
                  self.loaded = true; // 页面渲染好后
                  self.$nextTick();
                }
              });
            },
          },
        },
        {
          //搜索
          pName: "PlaceSearch",
          events: {
            init(instance) {
              // console.log(instance);
            },
          },
        },
      ],
    };
  },
 
};
</script>